<template>
  <div>
    <n-card title="志愿者列表">
      <n-table :bordered="false" :single-line="false">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>地址</th>
            <th>技能特长</th>
            <th>累计时长</th>
            <th>累计积分</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="volunteer in volunteers" :key="volunteer.id">
            <td>{{ volunteer.realName || '-' }}</td>
            <td>{{ volunteer.gender === 1 ? '男' : volunteer.gender === 0 ? '女' : '-' }}</td>
            <td>{{ volunteer.age || '-' }}</td>
            <td>{{ volunteer.address || '-' }}</td>
            <td>{{ volunteer.skills || '-' }}</td>
            <td>{{ volunteer.totalHours ? Number(volunteer.totalHours).toFixed(1) : 0 }}小时</td>
            <td>
              <n-text type="success">{{ volunteer.totalPoints }}</n-text>
            </td>
          </tr>
        </tbody>
      </n-table>

      <n-pagination
        v-model:page="pagination.page"
        :page-count="pagination.pageCount"
        style="margin-top: 20px; justify-content: center;"
        @update:page="loadVolunteers"
      />
    </n-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getVolunteerList } from '@/api/user'

const volunteers = ref([])
const pagination = reactive({
  page: 1,
  pageSize: 10,
  pageCount: 1
})

const loadVolunteers = async () => {
  try {
    const res = await getVolunteerList({
      page: pagination.page,
      size: pagination.pageSize
    })
    volunteers.value = res.data.records || []
    pagination.pageCount = res.data.pages || 1
  } catch (error) {
    console.error('加载志愿者列表失败:', error)
  }
}

onMounted(() => {
  loadVolunteers()
})
</script>

